<template>
  <div>
    <ul class="invitation">
      <li v-for="article in articles" :key="article.articleId" class="inv-item">
        <div class="hd">
          <img
            class="inv-img fl"
            src="https://gdr-yhs.oss-cn-hangzhou.aliyuncs.com/icon1.ico"
            alt=""
          />
          <span class="fl">{{ article.nickName }}</span>
          <div class="fl clearfix" v-show="1" style="line-height: 40px">
            <img
              class="fl"
              src="@/assets/认证.png"
              style="width: 20px; margin: 10px"
              alt=""
            />
          </div>
          <span class="time fl">{{ article.postTime }}</span>
          <span
            v-for="eachTag in article.tag"
            :key="eachTag"
            class="classify fl"
            >{{ eachTag }}</span
          >
        </div>
        <div class="bd">
          <router-link to="/lookpost"
            ><h3>{{ article.title }}</h3></router-link
          >
          <p>{{ article.summary }}</p>
        </div>
        <div class="fd">
          <li class="fl fd-item">浏览量{{ article.readCount }}</li>
          <li class="fl fd-item">评论{{ article.commentCount }}</li>
          <li class="fl fd-item">点赞数{{ article.goodCount }}</li>
        </div>
      </li>
    </ul>
    <el-pagination
      :current-page="currentPage"
      :total="totalRecords"
      :page-size="limit"
      :page-sizes="[10, 20, 30, 40, 50, 60, 70]"
      style="margin: 30px 0; text-align: center"
      layout="sizes,prev,pager,next,jumper,->,total,slot"
      @current-change="changeCurrentPage"
      @size-change="changeSize"
    />
  </div>
</template>

<script>
import forumApi from "@/api/forumApi";
import searchApi from "@/api/searchApi";
export default {
  name: "tsquare",
  data() {
    return {
      currentPage: 1,
      totalRecords: 100,
      limit: 10,
      articles: [
        {
          articleId: "f9xkyY6K6mZZ41G",
          pBoardId: 10000,
          pBoardName: "话题广场",
          userId: "7437465925",
          nickName: "测试账号02",
          title: "条件渲染",
          tag: ["前端"],
          content:
            '<p data-v-md-line="1">条件渲染</p>\r\n<h1 data-v-md-heading="v-if" data-v-md-line="2">v-if</h1>\r\n<p data-v-md-line="3">指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值时才被渲染。</p>\r\n<div data-v-md-line="4"><div class="v-md-pre-wrapper v-md-pre-wrapper-js extra-class"><pre class="v-md-hljs-js"><code>&lt;h1 v-<span class="hljs-keyword">if</span>=<span class="hljs-string">&quot;awesome&quot;</span>&gt;Vue is awesome!&lt;/h1&gt;\r\n</code></pre>\r\n</div></div><h1 data-v-md-heading="v-else" data-v-md-line="7">v-else</h1>\r\n<p data-v-md-line="8">你也可以使用 v-else 为 v-if 添加一个“else 区块”。</p>\r\n<div data-v-md-line="9"><div class="v-md-pre-wrapper v-md-pre-wrapper-js extra-class"><pre class="v-md-hljs-js"><code>&lt;button @click=<span class="hljs-string">&quot;awesome = !awesome&quot;</span>&gt;Toggle&lt;/button&gt;\r\n\r\n<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">h1</span> <span class="hljs-attr">v-if</span>=<span class="hljs-string">&quot;awesome&quot;</span>&gt;</span>Vue is awesome!<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span></span>\r\n<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">h1</span> <span class="hljs-attr">v-else</span>&gt;</span>Oh no ?<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span></span>\r\n</code></pre>\r\n</div></div>',
          summary:
            "令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值时才被渲染。",
          postTime: "2023-01-16T09:55:37.000+00:00",
          lastUpdateTime: "2023-02-01T14:05:55.000+00:00",
          readCount: 1,
          goodCount: 0,
          commentCount: 0,
          topType: 0,
          status: 1,
          attachmentType: null,
          star: null,
          questionType: null,
          answer: null,
          fileId: "",
        },
        {
          articleId: "foP3hhNAJTVCQYz",
          pBoardId: 10002,
          pBoardName: "话题广场",
          userId: "7437465925",
          nickName: "测试账号02",
          title: "新射雕英雄传：梅超风路透，孟子义散发超美，洪七公南帝路透！",
          tag: ["摸鱼"],
          content:
            '<p data-v-md-line="1">新版的射雕英雄传《金庸武侠世界》，目前还在拍摄中。一共有5个单元，请来了很多大家熟悉的演员。不过在服化道这块，似乎不是很有质感的样子。最近看到了孟子义，何润东，明道等人的造型，一起来看看吧。（本文为溪风影视汇聚独家首发，严禁抄袭洗稿！）</p>\r\n<p data-v-md-line="3">孟子义版梅超风路透<br>\r\n这个新版的女演员颜值都在线，尤其是陈都灵的冯蘅，还有孟子义的梅超风。</p>\r\n<p data-v-md-line="6">可惜周一围的黄药师，实在是不值得两大美女吃醋啊。<br>\r\n<img src="/api/file/getImage/202301/SQqeK0H5vMbrJgGa6y0FG247MIplyP.png" alt="图片"></p>\r\n',
          summary:
            "新版的射雕英雄传《金庸武侠世界》，目前还在拍摄中。一共有5个单元，请来了很多大家熟悉的演员",
          postTime: "2023-01-16T09:58:54.000+00:00",
          lastUpdateTime: "2023-02-01T14:05:55.000+00:00",
          readCount: 78,
          goodCount: 0,
          commentCount: 0,
          topType: 0,
          status: 1,
          attachmentType: null,
          star: null,
          questionType: null,
          answer: null,
          fileId: "",
        },
        {
          articleId: "foP3hhNAJTVCQYz",
          pBoardId: 10003,
          pBoardName: "话题广场",
          userId: "7437465925",
          nickName: "测试账号02",
          title: "新射雕英雄传：梅超风路透，孟子义散发超美，洪七公南帝路透！",
          tag: ["摸鱼"],
          content:
            '<p data-v-md-line="1">新版的射雕英雄传《金庸武侠世界》，目前还在拍摄中。一共有5个单元，请来了很多大家熟悉的演员。不过在服化道这块，似乎不是很有质感的样子。最近看到了孟子义，何润东，明道等人的造型，一起来看看吧。（本文为溪风影视汇聚独家首发，严禁抄袭洗稿！）</p>\r\n<p data-v-md-line="3">孟子义版梅超风路透<br>\r\n这个新版的女演员颜值都在线，尤其是陈都灵的冯蘅，还有孟子义的梅超风。</p>\r\n<p data-v-md-line="6">可惜周一围的黄药师，实在是不值得两大美女吃醋啊。<br>\r\n<img src="/api/file/getImage/202301/SQqeK0H5vMbrJgGa6y0FG247MIplyP.png" alt="图片"></p>\r\n',
          summary:
            "新版的射雕英雄传《金庸武侠世界》，目前还在拍摄中。一共有5个单元，请来了很多大家熟悉的演员",
          postTime: "2023-01-16T09:58:54.000+00:00",
          lastUpdateTime: "2023-02-01T14:05:55.000+00:00",
          readCount: 78,
          goodCount: 0,
          commentCount: 0,
          topType: 0,
          status: 1,
          attachmentType: null,
          star: null,
          questionType: null,
          answer: null,
          fileId: "",
        },
        {
          articleId: "foP3hhNAJTVCQYz",
          pBoardId: 10004,
          pBoardName: "话题广场",
          userId: "7437465925",
          nickName: "测试账号02",
          title: "新射雕英雄传：梅超风路透，孟子义散发超美，洪七公南帝路透！",
          tag: ["摸鱼"],
          content:
            '<p data-v-md-line="1">新版的射雕英雄传《金庸武侠世界》，目前还在拍摄中。一共有5个单元，请来了很多大家熟悉的演员。不过在服化道这块，似乎不是很有质感的样子。最近看到了孟子义，何润东，明道等人的造型，一起来看看吧。（本文为溪风影视汇聚独家首发，严禁抄袭洗稿！）</p>\r\n<p data-v-md-line="3">孟子义版梅超风路透<br>\r\n这个新版的女演员颜值都在线，尤其是陈都灵的冯蘅，还有孟子义的梅超风。</p>\r\n<p data-v-md-line="6">可惜周一围的黄药师，实在是不值得两大美女吃醋啊。<br>\r\n<img src="/api/file/getImage/202301/SQqeK0H5vMbrJgGa6y0FG247MIplyP.png" alt="图片"></p>\r\n',
          summary:
            "新版的射雕英雄传《金庸武侠世界》，目前还在拍摄中。一共有5个单元，请来了很多大家熟悉的演员",
          postTime: "2023-01-16T09:58:54.000+00:00",
          lastUpdateTime: "2023-02-01T14:05:55.000+00:00",
          readCount: 78,
          goodCount: 0,
          commentCount: 0,
          topType: 0,
          status: 1,
          attachmentType: null,
          star: null,
          questionType: null,
          answer: null,
          fileId: "",
        },
        {
          articleId: "foP3hhNAJTVCQYz",
          pBoardId: 10005,
          pBoardName: "话题广场",
          userId: "7437465925",
          nickName: "测试账号02",
          title: "新射雕英雄传：梅超风路透，孟子义散发超美，洪七公南帝路透！",
          tag: ["摸鱼"],
          content:
            '<p data-v-md-line="1">新版的射雕英雄传《金庸武侠世界》，目前还在拍摄中。一共有5个单元，请来了很多大家熟悉的演员。不过在服化道这块，似乎不是很有质感的样子。最近看到了孟子义，何润东，明道等人的造型，一起来看看吧。（本文为溪风影视汇聚独家首发，严禁抄袭洗稿！）</p>\r\n<p data-v-md-line="3">孟子义版梅超风路透<br>\r\n这个新版的女演员颜值都在线，尤其是陈都灵的冯蘅，还有孟子义的梅超风。</p>\r\n<p data-v-md-line="6">可惜周一围的黄药师，实在是不值得两大美女吃醋啊。<br>\r\n<img src="/api/file/getImage/202301/SQqeK0H5vMbrJgGa6y0FG247MIplyP.png" alt="图片"></p>\r\n',
          summary:
            "新版的射雕英雄传《金庸武侠世界》，目前还在拍摄中。一共有5个单元，请来了很多大家熟悉的演员",
          postTime: "2023-01-16T09:58:54.000+00:00",
          lastUpdateTime: "2023-02-01T14:05:55.000+00:00",
          readCount: 78,
          goodCount: 0,
          commentCount: 0,
          topType: 0,
          status: 1,
          attachmentType: null,
          star: null,
          questionType: null,
          answer: null,
          fileId: "",
        },
        {
          articleId: "foP3hhNAJTVCQYz",
          pBoardId: 100026,
          pBoardName: "话题广场",
          userId: "7437465925",
          nickName: "测试账号02",
          title: "新射雕英雄传：梅超风路透，孟子义散发超美，洪七公南帝路透！",
          tag: ["摸鱼"],
          content:
            '<p data-v-md-line="1">新版的射雕英雄传《金庸武侠世界》，目前还在拍摄中。一共有5个单元，请来了很多大家熟悉的演员。不过在服化道这块，似乎不是很有质感的样子。最近看到了孟子义，何润东，明道等人的造型，一起来看看吧。（本文为溪风影视汇聚独家首发，严禁抄袭洗稿！）</p>\r\n<p data-v-md-line="3">孟子义版梅超风路透<br>\r\n这个新版的女演员颜值都在线，尤其是陈都灵的冯蘅，还有孟子义的梅超风。</p>\r\n<p data-v-md-line="6">可惜周一围的黄药师，实在是不值得两大美女吃醋啊。<br>\r\n<img src="/api/file/getImage/202301/SQqeK0H5vMbrJgGa6y0FG247MIplyP.png" alt="图片"></p>\r\n',
          summary:
            "新版的射雕英雄传《金庸武侠世界》，目前还在拍摄中。一共有5个单元，请来了很多大家熟悉的演员",
          postTime: "2023-01-16T09:58:54.000+00:00",
          lastUpdateTime: "2023-02-01T14:05:55.000+00:00",
          readCount: 78,
          goodCount: 0,
          commentCount: 0,
          topType: 0,
          status: 1,
          attachmentType: null,
          star: null,
          questionType: null,
          answer: null,
          fileId: "",
        },
        {
          articleId: "foP3hhNAJTVCQYz",
          pBoardId: 10007,
          pBoardName: "话题广场",
          userId: "7437465925",
          nickName: "测试账号02",
          title: "新射雕英雄传：梅超风路透，孟子义散发超美，洪七公南帝路透！",
          tag: ["摸鱼"],
          content:
            '<p data-v-md-line="1">新版的射雕英雄传《金庸武侠世界》，目前还在拍摄中。一共有5个单元，请来了很多大家熟悉的演员。不过在服化道这块，似乎不是很有质感的样子。最近看到了孟子义，何润东，明道等人的造型，一起来看看吧。（本文为溪风影视汇聚独家首发，严禁抄袭洗稿！）</p>\r\n<p data-v-md-line="3">孟子义版梅超风路透<br>\r\n这个新版的女演员颜值都在线，尤其是陈都灵的冯蘅，还有孟子义的梅超风。</p>\r\n<p data-v-md-line="6">可惜周一围的黄药师，实在是不值得两大美女吃醋啊。<br>\r\n<img src="/api/file/getImage/202301/SQqeK0H5vMbrJgGa6y0FG247MIplyP.png" alt="图片"></p>\r\n',
          summary:
            "新版的射雕英雄传《金庸武侠世界》，目前还在拍摄中。一共有5个单元，请来了很多大家熟悉的演员",
          postTime: "2023-01-16T09:58:54.000+00:00",
          lastUpdateTime: "2023-02-01T14:05:55.000+00:00",
          readCount: 78,
          goodCount: 0,
          commentCount: 0,
          topType: 0,
          status: 1,
          attachmentType: null,
          star: null,
          questionType: null,
          answer: null,
          fileId: "",
        },
        {
          articleId: "foP3hhNAJTVCQYz",
          pBoardId: 10008,
          pBoardName: "话题广场",
          userId: "7437465925",
          nickName: "测试账号02",
          title: "新射雕英雄传：梅超风路透，孟子义散发超美，洪七公南帝路透！",
          tag: ["摸鱼"],
          content:
            '<p data-v-md-line="1">新版的射雕英雄传《金庸武侠世界》，目前还在拍摄中。一共有5个单元，请来了很多大家熟悉的演员。不过在服化道这块，似乎不是很有质感的样子。最近看到了孟子义，何润东，明道等人的造型，一起来看看吧。（本文为溪风影视汇聚独家首发，严禁抄袭洗稿！）</p>\r\n<p data-v-md-line="3">孟子义版梅超风路透<br>\r\n这个新版的女演员颜值都在线，尤其是陈都灵的冯蘅，还有孟子义的梅超风。</p>\r\n<p data-v-md-line="6">可惜周一围的黄药师，实在是不值得两大美女吃醋啊。<br>\r\n<img src="/api/file/getImage/202301/SQqeK0H5vMbrJgGa6y0FG247MIplyP.png" alt="图片"></p>\r\n',
          summary:
            "新版的射雕英雄传《金庸武侠世界》，目前还在拍摄中。一共有5个单元，请来了很多大家熟悉的演员",
          postTime: "2023-01-16T09:58:54.000+00:00",
          lastUpdateTime: "2023-02-01T14:05:55.000+00:00",
          readCount: 78,
          goodCount: 0,
          commentCount: 0,
          topType: 0,
          status: 1,
          attachmentType: null,
          star: null,
          questionType: null,
          answer: null,
          fileId: "",
        },
        {
          articleId: "foP3hhNAJTVCQYz",
          pBoardId: 10009,
          pBoardName: "话题广场",
          userId: "7437465925",
          nickName: "测试账号02",
          title: "新射雕英雄传：梅超风路透，孟子义散发超美，洪七公南帝路透！",
          tag: ["摸鱼"],
          content:
            '<p data-v-md-line="1">新版的射雕英雄传《金庸武侠世界》，目前还在拍摄中。一共有5个单元，请来了很多大家熟悉的演员。不过在服化道这块，似乎不是很有质感的样子。最近看到了孟子义，何润东，明道等人的造型，一起来看看吧。（本文为溪风影视汇聚独家首发，严禁抄袭洗稿！）</p>\r\n<p data-v-md-line="3">孟子义版梅超风路透<br>\r\n这个新版的女演员颜值都在线，尤其是陈都灵的冯蘅，还有孟子义的梅超风。</p>\r\n<p data-v-md-line="6">可惜周一围的黄药师，实在是不值得两大美女吃醋啊。<br>\r\n<img src="/api/file/getImage/202301/SQqeK0H5vMbrJgGa6y0FG247MIplyP.png" alt="图片"></p>\r\n',
          summary:
            "新版的射雕英雄传《金庸武侠世界》，目前还在拍摄中。一共有5个单元，请来了很多大家熟悉的演员",
          postTime: "2023-01-16T09:58:54.000+00:00",
          lastUpdateTime: "2023-02-01T14:05:55.000+00:00",
          readCount: 78,
          goodCount: 0,
          commentCount: 0,
          topType: 0,
          status: 1,
          attachmentType: null,
          star: null,
          questionType: null,
          answer: null,
          fileId: "",
        },
        {
          articleId: "foP3hhNAJTVCQYz",
          pBoardId: 10010,
          pBoardName: "话题广场",
          userId: "7437465925",
          nickName: "测试账号02",
          title: "新射雕英雄传：梅超风路透，孟子义散发超美，洪七公南帝路透！",
          tag: ["摸鱼"],
          content:
            '<p data-v-md-line="1">新版的射雕英雄传《金庸武侠世界》，目前还在拍摄中。一共有5个单元，请来了很多大家熟悉的演员。不过在服化道这块，似乎不是很有质感的样子。最近看到了孟子义，何润东，明道等人的造型，一起来看看吧。（本文为溪风影视汇聚独家首发，严禁抄袭洗稿！）</p>\r\n<p data-v-md-line="3">孟子义版梅超风路透<br>\r\n这个新版的女演员颜值都在线，尤其是陈都灵的冯蘅，还有孟子义的梅超风。</p>\r\n<p data-v-md-line="6">可惜周一围的黄药师，实在是不值得两大美女吃醋啊。<br>\r\n<img src="/api/file/getImage/202301/SQqeK0H5vMbrJgGa6y0FG247MIplyP.png" alt="图片"></p>\r\n',
          summary:
            "新版的射雕英雄传《金庸武侠世界》，目前还在拍摄中。一共有5个单元，请来了很多大家熟悉的演员",
          postTime: "2023-01-16T09:58:54.000+00:00",
          lastUpdateTime: "2023-02-01T14:05:55.000+00:00",
          readCount: 78,
          goodCount: 0,
          commentCount: 0,
          topType: 0,
          status: 1,
          attachmentType: null,
          star: null,
          questionType: null,
          answer: null,
          fileId: "",
        },
      ],
      tags: [
        {
          tagid: "t002",
          tagname: "后端",
        },
        {
          tagid: "t001",
          tagname: "前端",
        },
        {
          tagid: "t003",
          tagname: "摸鱼",
        },
      ],
    };
  },
  mounted() {},
  created() {
    this.search();
  },
  methods: {
    toLookPost() {
      this.$router.push({
        name: "lookpost",
      });
    },
    changeSize(size) {
      this.limit = size;
      this.search();
    },
    changeCurrentPage(currentPage) {
      this.changeCurrentPage = currentPage;
      this.search();
    },
    search() {
      var title = sessionStorage.getItem("searchInput");
      var pBoardId = sessionStorage.getItem("pBoardId");
      var findType = sessionStorage.getItem("findType");
      if (title == null || title == "") {
        title = "";
      }
      if (pBoardId == null || pBoardId == "") {
        pBoardId = 0;
      }
      if (findType == null || findType == "") {
        findType = 0;
      }
      this.selectBoardEssay(
        title,
        findType,
        this.currentPage,
        this.limit,
        pBoardId
      );
    },
    selectBoardEssay(title, findType, pageNum, pageSize, pBoardId) {
      searchApi
        .selectBoardEssay(title, findType, pageNum, pageSize, pBoardId)
        .then((response) => {
          this.articles = this.packageArticles(response.data.records);
          this.totalRecords = response.data.size;
        });
    },
    packageArticles(articles) {
      var articles_tmp = [];
      for (var i = 0; i < articles.length; i++) {
        articles[i].tag = articles[i].tag.split(",");
        articles[i].identity = articles[i].identity;
        articles_tmp.push(articles[i]);
      }
      return articles_tmp;
    },
  },
};
</script>

<style>
/*具体帖子*/
.inv-item {
  height: 150px;
  color: rgba(0, 0, 0, 0.7);
  /* background: pink; */
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  margin: 10px;
  margin-top: 0px;
  padding: 5px 0;
}
/*帖子头部*/
.inv-item .hd {
  height: 40px;
  line-height: 40px;
}
.inv-item .hd span {
  height: 16px;
  line-height: 16px;
  border-right: 1px solid rgba(0, 0, 0, 0.3);
  margin: 12px 0;
  padding: 0 8px;
}
.inv-img {
  height: 40px;
  width: 40px;
  border-radius: 20px;
}
/*帖子body*/
.inv-item .bd {
  margin: 10px 0;
}
.inv-item h3 {
  color: black;
}

.fd-item {
  margin-right: 20px;
}
</style>
